<template>
  <div class="city-header">
    <div class="header-option">
      <span class="arrow-left"></span>
      <span>城市选择</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CityHeader'
}
</script>

<style lang='stylus' scoped>
  .city-header
    font-size: .3rem
    .header-option
      background: #06C0D3
      color: #ffffff
      text-align: center
      padding: .3rem .3rem .1rem
      font-size: .31rem
      .arrow-left
        display :inline-block
        position: absolute
        left :.3rem
      .arrow-left::after
        display: inline-block
        content: " "
        height: .2rem
        width: .2rem
        border-width: 0 0 2px 2px
        border-color: #fff
        border-style: solid
        transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0)
</style>
